<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>网上购票</title>
<link rel="stylesheet" href="resources/css/frozen.css">
<link rel="stylesheet" href="resources/css/main.css">

<style>
.ui-header .ui-btn-left {
	background-color: #8cdaf6;
	height: 44px;
	color: #fff;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 10px;
}
.ui-header .ui-btn-right {
	background-color: #8cdaf6;
	height: 44px;
	color: #fff;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 10px;
}
#bus-date {
	color: #fff;
	border: 0;
    background: 0 0;
    -webkit-appearance: none;
}
#bus-date option {
	color: #222;
	border: 0;
    background: 0 0;
}
#bus-list li {
	margin-left: 0;
}
.bus-list-left {
	width: 45px;
	position: relative;
    margin: 10px 10px 10px 0;
	color: #14b6e7;
    font-size: 16px;
    font-weight: bold;
}
.bus-list-center {
	font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	-webkit-box-flex: 1;
	margin: 0 10px 0 0;
}
.bus-list-start {
    color: #ff8c05;
	font-weight: bold;
	padding: 0 5px 0 0;
}
.bus-list-end {
    color: #065fb9;
	font-weight: bold;
	padding: 0 5px;
	margin-left: 10px;
}
.bus-list-right {
    text-align: right;
	font-size: 14px;
}
.bus-list-price {
    color: #ff4e02;
	font-weight: bold;
}
.bus-list-bus-type {
    font-size: 16px;
}
.bus-list-seat {
    color: #14b6e7;
}
</style>
</style>
<script src="resources/lib/zepto.min.js"></script>
<script src="resources/js/frozen.js"></script>
<script src="resources/js/config.js"></script>
<script src="resources/js/main.js"></script>

</head>
<body ontouchstart="">
	<header class="ui-header ui-header-positive">
		<i class="ui-icon-return" onclick="location='index.html'"></i>
		<h1 id="route"></h1>
	</header>
	<footer class="ui-footer ui-footer-btn">
		<ul id="footer" class="ui-tiled ui-border-t">
			<li data-href="index.html" class="ui-border-r">
				<div>查询购票</div>
			</li>
			<li data-href="order.html" class="ui-border-r">
				<div>订单查询</div>
			</li>
			<li data-href="member.html">
				<div>会员中心</div>
			</li>
		</ul>
	</footer>
	<header class="ui-header ui-header-positive ui-border-b" style="top: 45px; background-color: #46c3f1">
		<button id="pre" class="ui-btn-left">前一天</button>
		<h1>
        	<select id="bus-date">
    		</select>
		</h1>
		<button id="next" class="ui-btn-right">后一天</button>
	</header>
	<section class="ui-container" style="border-top-width: 90px;">
		<section id="bus-container" class="ui-selector">
			<ul id="bus-list" class="start-station ui-list ui-list-text ui-list-cover ui-border-b">
			</ul>
		</section>
	</section>
	<section id="empty-text" class="ui-container ui-center" style="display: none;">
	</section>
	<div id="loading" class="ui-loading-block hide">
		<div class="ui-loading-cnt">
			<i class="ui-loading-bright"></i>
			<p>努力加载中...</p>
		</div>
	</div>

<script>
(function (){
	/* -------------------- 根据sessionStorage中的值，初始化界面 -------------------- */

	// 加载日期
	$("#bus-date").html(sessionStorage.busDate);

	// 显示线路名
	$("#route").html(sessionStorage.startStationName + ' — ' + sessionStorage.endStationName);

	/* -------------------- 绑定事件 -------------------- */
	var today = new Date();
	for(var i=0; i<=sessionStorage.sellDay; i++) {
		var date = new Date(today.valueOf() + 24*60*60*1000*i);
		var temp = formatDate(date);

		if(temp==sessionStorage.busDate) {
			$("#bus-date").append(
				"<option value='" + temp + "' selected>" + temp + "</option>"
			);
		} else {
			$("#bus-date").append(
				"<option value='" + temp + "'>" + temp + "</option>"
			);
		}
	}

	// 日期选择控件改变事件
	$(document).on("change", "#bus-date", function(){
		var busDate = $("#bus-date").val();
		sessionStorage.busDate = busDate;
		loadBus(busDate);
	});

	var lastDay = (new Date()).valueOf();
	lastDay = lastDay + sessionStorage.sellDay*24*60*60*1000;
	lastDay = formatDate(new Date(lastDay));

	// 前一天点击事件
	today = formatDate(new Date());
	$("#pre").tap(function(){
		var busDate = getPreDate($("#bus-date").val());

		if(busDate<today) {
			showInfoTip("不能早于今天");
		} else {
			$("#bus-date").val(busDate);
			sessionStorage.busDate = busDate;
			loadBus(busDate);
		}
	});

	// 后一天点击事件
	$("#next").tap(function(){
		var busDate = getNextDate($("#bus-date").val());

		if(busDate>lastDay) {
			showInfoTip("超出预售天数");
		} else {
			$("#bus-date").val(busDate);
			sessionStorage.busDate = busDate;
			loadBus(busDate);
		}
	});

	// 查询结果列表点击事件
	$(document).on("tap", "#bus-list li", function(){
		var orderRouteName = $(this).attr("route-name");
		var orderBusId = $(this).attr("bus-id");
		var orderBusKind = $(this).attr("bus-kind");
		var orderBusDate = $(this).attr("bus-date");
		var orderBusStartTime = $(this).attr("bus-start-time");
		var orderStartStationId = $(this).attr("start-station-id");
		var orderStartStationName = $(this).attr("start-station-name");
		var orderEndStationId = $(this).attr("end-station-id");
		var orderEndStationName = $(this).attr("end-station-name");
		var orderFullPrice = $(this).attr("full-price");
		var orderHalfPrice = $(this).attr("half-price");
		var checkGateName = $(this).attr("check-gate-name"); // 检票口

		sessionStorage.orderRouteName = orderRouteName;
		sessionStorage.orderBusId = orderBusId;
		sessionStorage.orderBusKind = orderBusKind;
		sessionStorage.orderBusDate = orderBusDate;
		sessionStorage.orderBusStartTime = orderBusStartTime;
		sessionStorage.orderStartStationId = orderStartStationId;
		sessionStorage.orderStartStationName = orderStartStationName;
		sessionStorage.orderEndStationId = orderEndStationId;
		sessionStorage.orderEndStationName = orderEndStationName;
		sessionStorage.orderFullPrice = orderFullPrice;
		sessionStorage.orderHalfPrice = orderHalfPrice;
		sessionStorage.checkGateName = checkGateName;

		if(!sessionStorage.memberId) {
			sessionStorage.backUrl = "submitOrder.html";
			location.href = "login.html";
		} else {
			location.href = "submitOrder.html";
		}

	});

	// 底部主菜单初始化
	initFooter("#footer");

	// 加载车次数据
	loadBus(sessionStorage.busDate);
})();

function loadBus(busDate) {
	$("#empty-text").hide();
	showLoading("#loading");
	ajax({
		url: appConfig.baseUrl + "/BusTicketInfo.go",
		data: {
			method: "queryTicketInfo",
			query: $(this).val(),
			type: "web",
			proxyId: appConfig.proxyId,
			sellstationid: sessionStorage.startStationId,
			startName: sessionStorage.startStationName,
			endName: sessionStorage.endStationName,
			pszBusdate: busDate
		},
		failMessage: "查询失败，请重试",
		success: function(data) {
			hideLoading("#loading");
			$("#bus-list").empty();
			if(!!data.rows && data.rows.length>0) {;
				for(var i=0; i<data.rows.length; i++) {
					var record = data.rows[i];
					$("#bus-list").append(
						"<li class='ui-border-t' bus-id='" + record.busId + "'" +
							" route-name='" + record.routeName + "'" +
							" bus-id='" + record.busId + "'" +
							" bus-type='" + record.busType + "'" +
							" bus-date='" + record.busDate + "'" +
							" bus-start-time='" + record.busStartTime.substring(0, 5) + "'" +
							" start-station-id='" + record.sellStationId + "'" +
							" start-station-name='" + record.sellStationName + "'" +
							" end-station-id='" + record.stationId + "'" +
							" end-station-name='" + record.stationName + "'" +
							" full-price='" + record.fullPrice + "'" +
							" half-price='" + record.halfPrice + "'" +
							" check-gate-name='" + record.checkGateName + "'" +
							">" +
							"<div class='bus-list-left'>" +
								record.busStartTime.substring(0, 5) +
							"</div>" +
							"<div class='bus-list-center ui-nowrap'>" +
								"<div>" +
									"线路：" + record.routeName +
								"</div>" +
								"<div>" +
									"车次：" + record.busId +
								"</div>" +
								"<div>" +
									"<span class='bus-list-start'>始</span>" + record.sellStationName + "" +
									"<span class='bus-list-end'>终</span>" + record.stationName +
								"</div>" +
							"</div>" +
							"<div class='bus-list-right'>" +
								"<div class='bus-list-price'>" +
									"票价：" + record.fullPrice +
								"</div>" +
								"<div>" +
									record.busTypeName +
								"</div>" +
								"<div class='bus-list-seat'>" +
									"余票：" + record.saleSeatQuantity +
								"</div>" +
							"</div>" +
						"</li>"
					);
				}

				$("#end-station-container").show();
			} else {
				$("#empty-text").html("没有可供购票的班次");
				$("#empty-text").show();
			}
		}
	});
}
</script>
</body>
</html>